<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <!-- symbol元件：需要在svg标签内使用，一个svg标签内，可以放多个symbol元件 -->
    <!-- 手工制作 => svg精灵图 => 不可见 -->
    <!-- 这里的内容，可以通过插件自动生成 => 不用我们配，架子中自带 -->
    <svg class="box">
      <!-- user -->
      <symbol id="icon-user" width="130" height="130" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z"
          stroke="#979797"
        />
      </symbol>
      <!-- link -->
      <symbol id="icon-link" width="128" height="128" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M115.625 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"
        />
        <path d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z" />
        <path d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z" />
      </symbol>
      <!-- table -->
      <symbol id="icon-table" width="128" height="128" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"
        />
        <path
          d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"
        />
      </symbol>
    </svg>

    <!-- 使用演示 -->
    <!-- 由于这个单词很长，很容易写错，将来考虑把这一块封装成组件 -->
    <svg width="128" height="128">
      <use xlink:href="#icon-user"></use>
    </svg>

    <svg width="128" height="128">
      <use xlink:href="#icon-link"></use>
    </svg>

    <svg width="128" height="128">
      <use xlink:href="#icon-table"></use>
    </svg>

  </body>
</html>
